import { trendAlarm } from "@/api/modules/iot/alarm";
import BaseChart from "@/components/Chart/BaseChart.vue";
import * as echarts from "echarts";
import { dayjs } from "element-plus";
export default defineComponent({
	props: {
		dayRange: Number,
		dashboardData: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	setup(props, { expose }) {
		const state = reactive({
			title: `告警趋势（近${props.dayRange == 7 ? "七" : "三十"}日）`
		});
		const trendChartOpts = reactive({
			animation: false,
			title: {} as any,
			tooltip: {
				trigger: "axis",
				formatter: "{b} <br/> {a}: {c} 次",
				axisPointer: {
					type: "shadow"
				}
			} as any,
			toolbox: { show: false },
			legend: { show: false },
			xAxis: {
				splitLine: { show: false },
				axisLine: { lineStyle: { color: "#7ac0c6" } },
				axisLabel: { rotate: 0, color: "#7ac0c6" },
				data: [] as any[],
				type: "category",
				boundaryGap: false,
				// 控制柱状图总宽度
				barWidth: 30,
				// 控制单个数据项中柱宽度，与barWidth共同作用决定柱之间间距
				barGap: "10%",
				// 控制数据项之间的间距
				barCategoryGap: "20%"
			},
			yAxis: {
				type: "value",
				splitLine: { show: true, lineStyle: { color: "#083f3a" } },
				axisLabel: { show: false, formatter: `{value}` }
			},
			grid: {
				left: "35",
				right: "35",
				bottom: "35",
				top: "35",
				containLabel: true
			},
			series: [
				{
					type: "line",
					// 控制柱状图总宽度
					barWidth: 30,
					smooth: true,
					showSymbol: false,
					name: "告警次数",
					lineStyle: {
						color: "#14dcd7",
						width: 4
					},
					//区域图-背景
					areaStyle: {
						opacity: 1,
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0, //底部
								color: "#0b4d44"
							},
							{
								offset: 0.3, //50%位置
								color: "#0b4d44"
							},
							{
								offset: 1, //顶部
								color: "#0b4d4400"
							}
						])
					},
					//柱状图-柱子背景(饼图需要置空，否则无法区分)
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: "#71c5f0" },
							{ offset: 1, color: "#038aff" }
						])
						// emphasis: {
						// 	//鼠标移动上去高亮
						// 	itemStyle: { focus: "series", blurScope: "coordinateSystem", color: "#1D7BCE" }
						// }
					},
					markPoint: null as any,
					emphasis: {
						itemStyle: {
							focus: "series",
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: "rgba(0, 0, 0, 0.5)"
						}
					},
					data: [] as any[]
				}
			]
		});
		const trendChart = ref();

		const loadData = async (result: any) => {
			trendChartOpts.series[0].type = props.dayRange ? "bar" : "line";
			trendChartOpts.xAxis.data = [];
			trendChartOpts.series[0].data = [];
			if (!result) {
				let size = props.dayRange ? 7 : 30;
				let timeStamp = `${dayjs().add(-size, "d").format("YYYY-MM-DD 00:00:00")}~${dayjs().format("YYYY-MM-DD 23:59:59")}`;
				let res: any = await trendAlarm({ timeStamp }, true);
				result = res.result;
			}
			let data: any = result || {};
			Object.keys(data).map((day: any) => {
				trendChartOpts.xAxis.data.push(dayjs(day + " 00:00:00").format("MM-DD"));
				trendChartOpts.series[0].data.push(data[day].total);
			});
			if (trendChartOpts.series[0].data.length) {
				trendChartOpts.title = { show: false };
			} else {
				trendChartOpts.title = {
					text: "暂无相关数据",
					x: "center",
					y: "center",
					textStyle: {
						color: "#aaa",
						fontSize: 15,
						fontWeight: "normal"
					}
				};
			}
			trendChartOpts.series[0].markPoint =
				props.dayRange == 7
					? {
							data: [
								{ type: "max", name: "最大值", label: { color: "#fff" }, itemStyle: { color: "#14dcd7" } },
								{ type: "min", name: "最小值", label: { color: "#fff" }, itemStyle: { color: "#fc8452" } }
							]
					  }
					: null;
			trendChart.value?.setChart(trendChartOpts);
		};

		expose({ loadData: loadData });
		return () => {
			return (
				<div class="h-full item-container">
					<div class="block-title">{state.title}</div>
					<BaseChart ref={trendChart} height="calc(100% - 45px)" />
				</div>
			);
		};
	}
});
